<template>
    <el-form v-if="counter" label-position="left" size="mini" label-width="80px">
        <el-form-item label="名称">
            <el-input :value="counter.name" @change="itemChange('name', $event)"></el-input>
        </el-form-item>
        <el-form-item v-if="true" label="背景图">
            <el-popover placement="left-end" title="选择图像" trigger="click">
                <res-selector @itemSelect="backgroundSelect"/>
                <el-button slot="reference">
                    <img v-if="counter.background" :src="'/api' + counter.background" width="100%">
                    <div v-if="!counter.background">选择图片</div>
                </el-button>
            </el-popover>
        </el-form-item>
        <el-form-item label="尺寸">
            <el-input
                type="number"
                :value="counter.w"
                @change="itemChange('w', $event)"
                placeholder="宽"
                style="width: 48%"
            ></el-input>
            <el-input
                type="number"
                :value="counter.h"
                @change="itemChange('h', $event)"
                placeholder="高"
                style="width: 48%; float: right"
            ></el-input>
        </el-form-item>
        <el-form-item label="凭证大小">
            <el-input-number
                :value="counter.desktopItemSize"
                @change="itemChange('desktopItemSize', $event)"
            ></el-input-number>
        </el-form-item>
        <div style="text-align: center; padding-bottom: 10px">请点击区域名字进行编辑</div>
        <el-form-item>
            <span
                :class="isActive('desktopArea')"
                slot="label"
                @click="activeArea('desktopArea')"
            >凭证区域</span>
            <pos-info :area="counter.desktopArea"/>
            <!-- <el-input :value="counter.desktopArea.rotate" @change="rotateChange" placeholder="旋转"></el-input> -->
            旋转 {{ counter.desktopArea.rotate }}°
            <el-slider
                v-model="counter.desktopArea.rotate"
                @change="rotateChange"
                :min="-90"
                :max="90"
                :step="0.5"
            ></el-slider>
        </el-form-item>
        <el-form-item>
            <span
                :class="isActive('appWindowArea')"
                slot="label"
                @click="activeArea('appWindowArea')"
            >业务窗口</span>
            <pos-info :area="counter.appWindowArea"/>
        </el-form-item>
        <el-form-item>
            <span
                :class="isActive('appTipsArea')"
                slot="label"
                @click="activeArea('appTipsArea')"
            >业务提示</span>
            <pos-info :area="counter.appTipsArea"/>
        </el-form-item>
        <el-form-item>
            <span
                :class="isActive('tooltipArea')"
                slot="label"
                @click="activeArea('tooltipArea')"
            >业务步骤</span>
            <pos-info :area="counter.tooltipArea"/>
        </el-form-item>
        <el-form-item>
            <span :class="isActive('floatArea')" slot="label" @click="activeArea('floatArea')">浮动物品</span>
            <pos-info :area="counter.floatArea"/>
        </el-form-item>
        <el-form-item>
            <span :class="isActive('videoArea')" slot="label" @click="activeArea('videoArea')">视频播放</span>
            <pos-info :area="counter.videoArea"/>
        </el-form-item>
    </el-form>
</template>
<script>
import { mapGetters, mapActions, mapMutations, mapState } from 'vuex'
import _ from 'lodash'
import resSelector from './resSelector'
import posInfo from './posInfo'

export default {
    name: 'counter-config',
    props: ['item'],
    components: { 'res-selector': resSelector, 'pos-info': posInfo },
    data() {
        return {}
    },
    computed: {
        ...mapState('course', ['counter', 'activedZone'])
    },
    mounted() {},
    watch: {
        counter(newVal, oldVal) {}
    },
    methods: {
        isActive(name) {
            return this.activedZone === name ? 'label-area active' : 'label-area'
        },
        activeArea(name) {
            this.$store.commit('course/update', { activedZone: name })
        },
        backgroundSelect(item) {
            console.log('selected res', item)
            this.$store.commit('course/setCounterBackground', {
                counter: { ...this.counter, background: item.fileUrl }
            })
        },
        rotateChange(value) {
            this.$store.commit('course/rotateDesktopArea', value)
        },
        itemChange(key, value) {
            this.$store.commit('course/setCounter', {
                counter: { ...this.counter, [key]: value }
            })
        }
    }
}
</script>
<style lang="less">
.label-area {
    color: lightskyblue;
    &:hover {
        cursor: context-menu;
        color: lightsalmon;
    }
    &.active {
        font-weight: 700;
        color: salmon;
    }
}
</style>



